<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="css/common.css" />
    <meta name="viewport" content="width=device-width"/>
    <title>NCRE2</title>
    <style>
      .login-panel{
        background-color: #004b7e;
        height:100vh;
        width:100%;
        display: flex;
        flex-direction: column;
        overflow: auto;
        align-items: center;
        color:#fff;
      }
      .page-title{
        font-size: 180%;
        margin-top:100px;
      }
      .form-panel{
        margin-top:50px;
        width:90%;
        padding:0 5%;
      }
      .form-row{
        display: flex;
        flex-direction: column;
        width:100%;
        margin-top:5%;
      }
      .form-row .form-label{
        color:rgba(255,255,255,0.8);
      }
      .form-row .form-input{
        height:32px;
        padding:5px 15px;
        border:none;
        border-radius: 5px;
        outline: none;
        margin-top:5px;
      }
      .form-row.buttons{
        margin:15% auto;
      }
      .form-row .form-button{
        background-color: rgba(255,255,255,0.5);
        padding:5px 15px;
        border-radius: 5px;
        text-align: center;
        height:32px;
        line-height: 32px;
      }
      .form-row .form-button.link-button{
        background-color: transparent;
        margin-top:20px;
      }
      .form-row .form-button.link-button a{
        color:#fff;
        text-decoration: none;
      }
      .error-text{
        color:#d5503f;
      }
    </style>
</head>
<body>
  <div class="login-panel">
    <h1 class="page-title">NCRE二级Java练习助手</h1>
    <div class="form-panel">
      <div class="form-row">
        <div class="form-label">姓&nbsp;&nbsp;名：</div>
        <input class="form-input" id="userName" type="text" placeholder="请输入姓名"/>
      </div>
      <div class="form-row">
        <div class="form-label">登录名：</div>
        <input class="form-input" id="loginName" type="text" placeholder="请输入登录账户"/>
      </div>
      <div class="form-row">
        <div class="form-label">密&nbsp;&nbsp;码：</div>
        <input class="form-input" id="loginPassword" type="password" placeholder="请输入账户密码"/>
      </div>
      <div class="form-row">
        <div class="form-label">确认密码：</div>
        <input class="form-input" id="loginRepeatPassword" type="password" placeholder="请确认账户密码"/>
      </div>
      <div class="form-row">
        <div class="error-text" id="errorText">用户名密码错误</div>
      </div>

      <div class="form-row buttons">
        <div class="form-button" id="registButton">注册</div>
        <div class="form-button link-button">
          <a href="login.html" target="_self">返回登录</a>
        </div>
      </div>
    </div>
  </div>
</body>
<script>
  /**
   * 数据层：注册账户数据对象
   * @param name 姓名
   * @param login 登录名
   * @param password 登录密码
   * @constructor
   */
  function AccountInfo(name,login,password){
    this.firstName=name
    this.lastName=name
    this.login=login
    this.password=password
  }

  /**
   * 展示层：显示信息
   * @param message 需要显示的信息
   */
  function showMessage(message){
    //找到用于显示信息的div，id=errorText，改变div的文本值
    let infoDiv=document.querySelector("#errorText")
    if(infoDiv!=null){
      infoDiv.textContent=message
    }
  }

  /**
   * 交互层：页面加载
   */
  window.onload=function(){
    //清空信息提示
    showMessage("")
  }

  /**
   * 根据input输入框的id值，返回这个input的value
   * @param inputId
   */
  function getValue(inputId){
    let input=document.querySelector("#"+inputId)
    if(input!=null){
      return input.value
    }else{
      return null
    }
  }

  //交互层：注册按钮点击事件
  let regButton=document.querySelector("#registButton")
  if(regButton!=null){
    regButton.addEventListener("click",function(){
      console.log("注册按钮点击")
      showMessage("")
      //1、表单验证
      //(1)必填项验证
      let userName=getValue("userName")
      if(userName==null || userName==""){
        showMessage("请输入姓名")
        return
      }
      let loginName=getValue("loginName")
      if(loginName==null || loginName==""){
        showMessage("请输入登录名")
        return
      }
      let password=getValue("loginPassword")
      if(password==null || password==""){
        showMessage("请输入密码")
        return
      }
      let repeatPassword=getValue("loginRepeatPassword")
      if(repeatPassword==null || repeatPassword==""){
        showMessage("请确认密码")
        return
      }
      //(2)确认密码的验证
      if(password!=repeatPassword){
        showMessage("两次密码输入不一致")
        return
      }
      //2、发送请求
      let accountInfo=new AccountInfo(userName,loginName,password)
      console.log("用于注册的数据：",accountInfo)
      let request=new XMLHttpRequest()
      request.onreadystatechange=function(){
        if(request.readyState==4){
          console.log("注册请求完成：",request)
          if(request.status==201){
            //注册成功
            showMessage("恭喜你，注册成功。")
          }else{
            //注册错误
            let result=JSON.parse(request.responseText)
            showMessage("注册发生错误："+result.title)
          }
        }
      }
      request.open("POST","http://ncre2-server.nj-agile.com/api/register")
      request.setRequestHeader("Content-Type","application/json")
      request.send(JSON.stringify(accountInfo))

    })
  }

</script>
</html>